<template>
<div class="center" :style="backgroundTransparent?{'background-color':'transparent'}:{ 'background-image': 'url(' + bgImage + ')', 'filter': 'blur(8px)' }"></div>
  <div class="center" style="    overflow: hidden;" >
    <Scalebox
    :width="resolutionPolicy.width"
    :height="resolutionPolicy.height"
    :delay="100"
    :bgColor="'#ffffff00'"
    :bgImage="bgImage"
    :backgroundTransparent="backgroundTransparent"
    :ResolutionPolicy="resolutionPolicy.policy"
    @scaleChange="scaleChange"
    ref="scaleBoxRef"
    >
      <!-- livekit语音 -->
      <LivekitManager
        :url="livkitUrl"
        :token="livkitToken"
        :currentProjectType="currentProjectType"
      ></LivekitManager>
      <!-- 数字人web端渲染 -->
      <AiHumanWebRenderer 
        v-if="webHumanUrl&&currentProjectType == 'Web3d'"
        :full-body="fullBody"
        :url="webHumanUrl"
        :actionList="webHumanActionList"
        :x="'0'"
        :y="'0'"
        :style="'transform: translate('+webHumanParams.x+'px, '+webHumanParams.y+'px)'"
        :width="webHumanParams.width"
        :height="webHumanParams.height"
        ref="webhumanRenderRef"
      >
      </AiHumanWebRenderer>
      <!-- 数字人ue端渲染 -->
      <AiHumanUeRenderer
        :x="ueHumanParams.x"
        :y="ueHumanParams.y"
        :width="ueHumanParams.width"
        :height="ueHumanParams.height"
        v-if="currentProjectType == 'UE3d'&&ueHumanUrl"
        :ueUrl="ueHumanUrl"
        :ueStreamerId="ueHumanStreamerId"
      ></AiHumanUeRenderer>
      <!-- 数字人2d端渲染 -->
      <AiHuman2dRenderer
        :x="Human2dParams.x"
        :y="Human2dParams.y"
        :width="Human2dParams.width"
        :height="Human2dParams.height"
        v-if="Human2dUrl"
        :stream_id="Human2dUrl"
        :human2dConfig="Human2dConfig"
        ref="webhuman2dRenderRef"
      ></AiHuman2dRenderer>
      <!-- 对话框 -->
      <ChatBox 
        v-if="sceneStore.projectConfig"
        :boxType=chatboxParams.box.type
        :box=chatboxParams.box
        :input=chatboxParams.input
        :questions=chatboxParams.questions
        :commonQuestions="chatboxParams.questions.commonQuestions"
        :platform="currentProjectPlatform"
        ref="chatboxRef"
      ></ChatBox>
      <!-- 图片 -->
      <Animation :show-anim="true" v-for="(image,index) in imageList" :key="index" :animation="image.animation" :animationOption="image.animationOption">
const origin = internalInstance.appContext.config.globalProperties.origin
        <img class="center"  :style="'transform: translate('+image.x+'px, '+image.y+'px);'+'left:0px;top:0px;width:'+image.width+'px;height:'+image.height+'px;z-index: '+image.zindex+';'" :src="origin+image.url">
      </Animation>
      <!-- 视频 -->
      <Animation :show-anim="true" v-for="(video,index) in videoList" :key="index" :animation="video.animation" :animationOption="video.animationOption">
        <video controls class="center"  :style="'transform: translate('+video.x+'px, '+video.y+'px);'+'left:0px;top:0px;width:'+video.width+'px;height:'+video.height+'px;z-index: '+video.zindex+';'" :src="origin+video.url"></video>
      </Animation>
      <!-- 流程节点图片 -->
      <Animation  :ref="setAnimationRef" v-for="(image,index) in flowImageList" :key="image.id" :timelineData="image.timelineData">
        <img class="center" :style="'transform: translate('+image.x+'px, '+image.y+'px);'+'left:0px;top:0px;width:'+image.width+'px;height:'+image.height+'px;z-index: '+image.zindex+';'" :src="origin+image.url">
      </Animation>
      <!-- 流程节点视频 -->
      <Animation :ref="setAnimationRef" v-for="(video,index) in flowVideoList" :key="index" :timelineData="video.timelineData">
        
        <video class="center" autoplay :style="'transform: translate('+video.x+'px, '+video.y+'px);'+'left:0px;top:0px;width:'+video.width+'px;height:'+video.height+'px;z-index: '+video.zindex+';'" :src="origin+video.url"></video>

      </Animation>
      <!-- 流程节点svg动画 -->
      <Animation :ref="setAnimationRef" v-for="(svgAnim,index) in flowSvgAnimList" :key="index" :timelineData="svgAnim.timelineData">
        
        
        <Lottie
          class="center"
            :x="svgAnim.x"
            :y="svgAnim.y"
            :width="svgAnim.width"
            :height="svgAnim.height"
            :zIndex="svgAnim.zindex"
            :opacity="svgAnim.opacity"
            :ref="setSvgAnimRef"
            :timelineData="svgAnim.timelineData"
          ></Lottie>
      </Animation>
      <!-- 网页 -->
      <Animation :show-anim="true" v-for="(iframe,index) in iframeList" :key="index" :animation="iframe.animation" :animationOption="iframe.animationOption">
        <iframe class="center" :style="'transform: translate('+iframe.x+'px, '+iframe.y+'px);'+'left:0px;top:0px;width:'+iframe.width+'px;height:'+iframe.height+'px;z-index: '+iframe.zindex+';'" :src="'https://'+iframe.url"></iframe>
      </Animation>
      <!-- 文字 -->
      <Animation :show-anim="true" v-for="(text,index) in textList" :key="index" :animation="text.animation" :animationOption="text.animationOption">
        <div class="center" :style="'transform: translate('+text.x+'px, '+text.y+'px);'+'left:0px;top:0px;width:'+text.width+'px;height:'+text.height+'px;z-index: '+text.zindex+';'">
          <el-text line-clamp="2" :style="text.style" >{{ text.text }}</el-text>
        </div>
      </Animation>
      <!-- 富文本 -->
      <Animation :show-anim="true" v-for="(text,index) in htmlTextList" :key="index" :animation="text.animation" :animationOption="text.animationOption">
        <div class="center" :style="'transform: translate('+text.x+'px, '+text.y+'px);'+'left:0px;top:0px;width:'+text.width+'px;height:'+text.height+'px;z-index: '+text.zindex+';'">
          <div
            v-html="text.text"
            readonly
            style="left:0px;top:0px;width:100%;height:100%; outline: none;resize:none;"
          ></div>
        </div>
      </Animation>
      <!-- 字幕 -->
      <Captions 
      v-if="captionsParams.enable"
      :text="currentText"
      v-show="currentText&&currentText!=''"
      :x="'0'"
      :y="'0'"
      :style="'transform: translate('+captionsParams.x+'px, '+captionsParams.y+'px)'"
      :width="captionsParams.width"
      :height="captionsParams.height"
      :captionStyle = "captionsParams.style"
      ></Captions>
      <!-- 语音输入组件 -->
      <VoiceInput
      v-if="voiceInputParams.enable&&currentProjectPlatform == 'screen'"
      :x="'0'"
      :y="'0'"
      :style="'transform: translate('+voiceInputParams.x+'px, '+voiceInputParams.y+'px)'"
      :width="voiceInputParams.width"
      :height="voiceInputParams.height"
      :iconUrl="voiceInputParams.url"
      ></VoiceInput>
      <Interrupt
        v-show="false"
        v-if="interruptParams.buttonInterrupt || interruptParams.tip"
        :buttonInterrupt="interruptParams.buttonInterrupt"
        :buttonOptions="interruptParams.buttonOptions"
        :tip="interruptParams.tip"
        :tipOptions="interruptParams.tipOptions"
        :voiceInterruptWords="interruptParams.voiceInterruptWords"
        :interruptResponses="interruptParams.interruptResponses"
      ></Interrupt>
      <!-- <el-button type="primary" @click="testImage">测试图片</el-button>
      <el-button type="primary" @click="testVideo">测试视频</el-button>
      <el-button type="primary" @click="testIframe">测试网页</el-button>
      <el-button type="primary" @click="testText">测试文字</el-button>
      <el-button v-if="webHumanActions.length>0" v-for="(btn,index) in webHumanActions" type="primary" @click="testAction(btn)">测试动作{{ btn }}</el-button>
      <el-button v-if="flowNodes.length>0" v-for="(flowNode,index) in flowNodes" type="primary" @click="setFlowNode(flowNode)">测试节点{{ index }}</el-button> -->
      <!-- <el-button v-if="webHumanCostumeList.length>0" v-for="(btn,index) in webHumanCostumeList" type="primary" @click="changeCostum(btn)">切换服装{{ index }}</el-button> -->
    </Scalebox>
  </div>
    
    <timeline v-show="false" ref="timelineRef" :flowNode="currentFlowNode" ></timeline>
    <div style="position: absolute;pointer-events: none;width: 100%;height: 100%;z-index: 999;" id="externalUI"></div>
    <div v-if="currentSleepState" style="overflow: hidden;position: absolute;width: 100%;height: 100%;z-index: 999;background-color: #00000044;" id="sleepUI">
      <el-carousel
        height="100%"
        style="width: 100%;height:100%;"
        :autoplay="true"
        :interval="3000"
        :loop="true"
        v-if="currentSleepType == 'image'"
      >
        <el-carousel-item v-for="item in sceneStore.projectConfig.sleepConfig.sleepParams.imageList" :key="item">
          <el-image style="width: 100%; height: 100%" :src="origin+item.url" :fit="'contain'" />
        </el-carousel-item>
      </el-carousel>
      <video id="videoSleep" ref="videoSleepRef" v-if="currentSleepType == 'video'" style="object-fit: contain;width: 100%; height: 100%" :src="origin+sceneStore.projectConfig.sleepConfig.sleepParams.videoList[currentSleepVideoIndex].url" :autoplay="true" ></video>
      <h3 
      style="position: absolute;top: 90%;left: 50%;transform: translate(-50%, -50%);color: #fff;background-color: #00000044;    border-radius: 5px;
    padding: 10px;"
      v-if="sceneStore.projectConfig.wakeConfig.wakeParams.wakeTip&&sceneStore.projectConfig.wakeConfig.wakeParams.wakeTip!=''">
      {{ sceneStore.projectConfig.wakeConfig.wakeParams.wakeTip }}
      </h3>
      <el-button style="position: absolute;bottom: 95%;left: 50%;transform: translate(-50%, -50%);" type="primary" @click="wakeUp(false)">退出睡眠</el-button>
      
    </div>
</template> 
<script setup lang="ts">
import {ref,onMounted,getCurrentInstance} from 'vue'
import Scalebox from "../../components/scaleBox/index.vue"
import AiHumanWebRenderer from "@/components/aiHumanWebRenderer/index.vue"
import LivekitManager from "@/components/livekitManager/index.vue"
import ChatBox from "@/components/chatBox/index.vue"
import Captions from "@/components/cations/index.vue"
import Animation from "@/components/animation/index.vue"
import AiHumanUeRenderer from "@/components/aiHumanUeRenderer/index.vue"
import AiHuman2dRenderer from "@/components/AiHuman2dRenderer/index.vue"
// 在 import 部分添加
import VoiceInput from "@/components/voiceInput/index.vue"
// 在 import 部分添加
import Interrupt from "@/components/interrupt/index.vue"
import Lottie from "@/components/Lottie/index.vue"
import timeline from "@/components/timeline/index.vue"
import {mittTypes} from "@/util/types"
import {getCanOpenAndOpen2d,get2dResourceApplyResult,close2d,closeRoom,closeUe,getCanOpenAndOpenUe,getProjectAllConfigInfo,getTokenToBegin,getAimetaProjectManagerdetailInfo,getAimetaManagerdetailInfo } from "@/api/apiRequst"
import {getUrlParam,uuid} from "@/util/common.js"
import { useSceneStore } from '@/stores/scene'
import $ from 'jquery'
import {ElMessage} from 'element-plus'
import {asynRemove, asynLoad,addCss} from "@/util/common.js"
import '@/styles/richText.less'
const sceneStore = useSceneStore();

const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const origin = internalInstance.appContext.config.globalProperties.origin
const backgroundTransparent = getUrlParam('transparent')  
if(backgroundTransparent){
  // 添加透明背景样式到文档
  document.documentElement.style.backgroundColor = 'transparent';
  document.body.style.backgroundColor = 'transparent';
  // // 取消 color-scheme 属性，防止系统默认样式影响透明效果
  // document.documentElement.style.colorScheme = 'normal';
}
// SHOW_ALL 
// 整个应用程序在指定区域可见，没有变形，同时保持原始纵横比，边框可能出现在画面的旁侧。
// FIXED_WIDTH 
// 该应用程序采用设计分辨率大小的宽度并修改内部画布的高度，使其适合设备的纵横比，不会发生变形但是您必须确保您的应用程序在不同的纵横比的设备下工作。
// FIXED_HEIGHT 
// 该应用程序采用设计分辨率大小的高度并修改内部画布的宽度，使其适合设备的纵横比，不会发生变形，但是您必须确保您的应用程序在不同的纵横比的设备下工作。
// EXACT_FIT 
// 整个应用程序在指定区域可见，无需尝试保留原始纵横比，可能会发生变形，出现画面拉伸或压缩。
const scaleBoxRef = ref(null)
const resolutionPolicy = ref({
      policy:'FIXED_WIDTH',
      width:1920,
      height:1080,
  })
const scaleX = ref(1)
const scaleChange = function(scaleVal:any) {
  /*
    默认为宽度适配模式(等比缩放)
    FIXED_WIDTH/FIXED_HEIGHT/SHOW_ALL scaleVal = [x缩放值, y缩放值]
    EXACT_FIT scaleVal = 等比缩放值
  */
  // scale.value = 1 / scaleVal;
  // if(scaleBoxRef.value){
  //   for(let i=0;i<scaleBoxRef.value.rocScaleBox.children.length;i++){
  //     let width = parseFloat(scaleBoxRef.value.rocScaleBox.children[i].style.width.replace('px',''))
  //     let height = parseFloat(scaleBoxRef.value.rocScaleBox.children[i].style.height.replace('px',''))
  //     switch(resolutionPolicy.value){
  //         case "SHOW_ALL":
  //           scaleBoxRef.value.rocScaleBox.children[i].style.transform = "scale("+1/scaleVal+")";
  //           break;
  //         case "FIXED_WIDTH":
  //           scaleBoxRef.value.rocScaleBox.children[i].style.transform = "scaleX("+1/scaleVal[0]+")";
  //           scaleX.value = 1/scaleVal[0];
  //           break;
  //         case "FIXED_HEIGHT":
            
  //           scaleBoxRef.value.rocScaleBox.children[i].style.transform = "scaleY("+1/scaleVal[1]+")"
            
  //           break;
  //         case "EXACT_FIT":
  //           scaleBoxRef.value.rocScaleBox.children[i].style.transform = "scaleX("+1/scaleVal[0]+") scaleY("+1/scaleVal[1]+")"
  //         break;
  //     }
  //     scaleBoxRef.value.rocScaleBox.children[i].style.transformOrigin = "center"
  //   }
  // }
}
const currentSleepState = ref(false)
const currentSleepType = ref('')
const currentSleepVideoIndex = ref(0)
const currentSleepFlowNodeIndex = ref(0)
const videoSleepRef = ref()
const sleepTime = ref(30)
const bgImage = ref('https://aiimg.huilan.com/aiHuman/images/back.jpg')
const flowImageList = ref([])
const flowVideoList = ref([])
const flowSvgAnimList = ref([])
const webhuman2dRenderRef = ref(null)
const isplaying = ref(false)

const currentProjectType = ref('')
const currentProjectPlatform = ref('pc')
const currentInputType = ref('Multi')
const currentFlowNode = ref()
const imageList = ref([])
const videoList = ref([])
const iframeList = ref([])
const textList = ref([])
const htmlTextList = ref([])
const actionList = ref([])
const currentText = ref("")
const livkitToken = ref(null)
const livkitUrl = ref(null)
const ueHumanServerId = ref(null)
const ueHumanUrl = ref(null)
const Human2dUrl = ref(null)
const Human2dConfig = ref({
  urls:'',
  username:'',
  credential:'',
})
const resource2dCode = ref(null)
const ueHumanStreamerId = ref(null)
const Human2dStreamerId = ref(null)
const webHumanUrl = ref(null)
const webHumanCostumeList = ref([])
const webHumanActionList = ref([])
const webHumanActions = ref([])
const flowNodes = ref([])
const timelineRef = ref()
const webhumanRenderRef = ref()
const fullBody = ref(false)
const chatboxRef = ref(null)
const webHumanParams = ref({
  x:"-700",y:"-100",width:"500",height:"600"
})
const ueHumanParams = ref({
  x:"-600",y:"0",width:"768",height:"864"
})
const Human2dParams = ref({
  x:"-600",y:"0",width:"768",height:"864"
})
const chatboxParams = ref({
  box:{
    "x": 233,
    "y": -90,
    "width": 710,
    "height": 590,
    "type":"multi", //多条multi 单挑single,
    "opacity":0,
    "backgroundColor":"#000000",
    "fontSize":12,
    "headImg":"default"
  },
  input:{
    
    "x": 236,
    "width": 718,
    "y": 292,
    "height": 64,
    "type":"audioText", //语音audio 文字text 语音加文字audioText,
    "opacity":0,
    "backgroundColor":"#000000",
    "fontSize":12,
  },
  questions:{
    
    "x": 232,
    "y": 227,
    "width": 707,
    "height": 34,
    "type":"manual", //自定义manual 自动匹配auto,
    "opacity":0,
    "backgroundColor":"#000000",
    "fontSize":12,
    commonQuestions:['你是谁']
  },
 
})
const captionsParams = ref({
  enable:false,
  x:"0",y:"700",width:"1500",height:"50",
  style:{
    "lineHeight": '1.5',
    "fontSize": '20px',
    "fontFamily": "宋体",
    "color": "#ff0000",
    "fontItalic": false,
    "fontBold": false,
    "border-radius": "10px",
    "background-color": "#ffffff9e",
    "box-shadow":" 0px 0px 20px 0px #ad00ff69",
    "border":"2px solid #ad00ff69",
    "padding":'20px',
    "fontUrl": "http://172.20.0.187:9000/000000/ttf_1672312784193.ttf",
    "height": "auto",
    "text-align": "left",
    "position": "relative"
  }
})
const voiceInputParams = ref({
  enable: false,
  x: "20",
  y: "80",
  width: "60",
  height: "60",
  zindex: 10,
  opacity: 1,
  url: origin+"/aihumanEdit/UIasset/image/voice.png"
})
// 在 script 部分添加 interruptParams 的定义
const interruptParams = ref({
  buttonInterrupt: true,
  buttonOptions: {
    x: 20,
    y: 20,
    width: 160,
    height: 60,
    zindex: 10
  },
  tip: true,
  tipOptions: {
    x: 80,
    y: 20,
    width: 200,
    height: 40,
    zindex: 10
  },
  voiceInterruptWords: ['别说了', '我知道了'],
  interruptResponses: [
    { text: '好的，您还可以问我其他问题哦~', flowNode: null },
    { text: '好的，您还可以说一下其他感兴趣的话题问我哦~', flowNode: null }
  ]
})
function testImage(){
  imageList.value = [
    {
      "url": "https://aiimg.huilan.com/aiDraw/lei.jpg", //图片url
      "startTime": "00:00:00:00",
      "endTime": "00:00:02:650",
      "x": -500, //位置
      "y": -50, //位置
      "width": 200, //宽度
      "height": 200, //高度
      "scale": 1.0, //缩放
      "zIndex": 11, //层级
      "alwaysShow": false, //是否一直显示
      //使用motion one动画库，参照文档https://motion.dev/docs/animate
      // animation为一个动画序列
      "animation":[
        {
          "animAttri":{"opacity":[0,1],"x":-400,"y":-50},
          "animOption":{ "duration": 2,"autoplay": true }
        },
        {
          "animAttri":{"opacity":[1,0],"x":-400,"y":150},
          "animOption":{ "duration": 2,"autoplay": true,"delay": 2}
        }
      ],
      "animationOption":{delay:0.5}
    }
  ]
}
function testVideo(){
  videoList.value = [
    {
      "url": "https://aiimg.huilan.com/material/video/bucket-1690973302633086978/1831991325539487746.mp4", //网页url
      "loop": false,
      "startTime": "00:00:00:00",
      "endTime": "00:00:00:173",
      "x": -500, //位置
      "y": -50, //位置
      "width": 960,
      "height": 200.0,
      "scale": 1,
      "zIndex": 13, //层级
      "alwaysShow": false,
      //使用motion one动画库，参照文档https://motion.dev/docs/animate
      // animation为一个动画序列
      "animation":[
        {
          "animAttri":{"opacity":[0,1],"x":-400,"y":-50},
          "animOption":{ "duration": 2,"autoplay": true }
        },
        {
          "animAttri":{"opacity":[1,0],"x":-400,"y":150},
          "animOption":{ "duration": 2,"autoplay": true,"at": 4}
        }
      ],
      "animationOption":{delay:0.5}
    }
  ]
}
function testIframe(){
  iframeList.value = [
    {
      "url": origin+"", //网页url
      "startTime": "00:00:00:00",
      "endTime": "00:00:00:173",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 400.0,
      "scale": 1,
      "zIndex": 14, //层级
      "alwaysShow": false,
      //使用motion one动画库，参照文档https://motion.dev/docs/animate
      // animation为一个动画序列
      "animation":[
        {
          "animAttri":{"opacity":[0,1],"x":-400,"y":-50},
          "animOption":{ "duration": 2,"autoplay": true }
        },
        {
          "animAttri":{"opacity":[1,0],"x":-400,"y":150},
          "animOption":{ "duration": 2,"autoplay": true,"delay": 2}
        }
      ],
      "animationOption":{delay:0.5}
    }
  ]
}
function testText(){
  textList.value = [
    {
      "text": "这是新添加的文字", //文字
        "startTime": "00:00:00:00",
        "endTime": "00:00:01:213",
        "x": 100,
        "y": 0,
        "width": 400, //宽度
      "height": 50, //高度
        "scale": 1,
        "zIndex": 15, //层级
        "alwaysShow": false,
        "style": {
          "fontSize": "30px",
          "fontFamily": "宋体",
          "color": "#ff0000",
          "fontItalic": false,
          "fontBold": false,
          "fontUrl": "http://172.20.0.187:9000/000000/ttf_1672312784193.ttf"
        },
      //使用motion one动画库，参照文档https://motion.dev/docs/animate
      // animation为一个动画序列
      "animation":[
        {
          "animAttri":{"opacity":[0,1],"x":-400,"y":-50,"scale":[0,1.5]},
          "animOption":{ "duration": 2,"autoplay": true }
        },
        {
          "animAttri":{"opacity":[1,0],"x":-400,"y":150},
          "animOption":{ "duration": 2,"autoplay": true,"delay": 1}
        }
      ],
      "animationOption":{delay:0.5}
    }
  ]
}
function testAction(name:any){
  // emitter.emit(mittTypes.LIVEKIT.MESSAGE_ACTION_RECIVE,name)
  webhumanRenderRef.value.generateGif(name)
}
function changeCostum(url:any){
  // emitter.emit(mittTypes.LIVEKIT.MESSAGE_ACTION_RECIVE,'F-91L_双手放小腹_右手指向右侧_长距离')
  // emitter.emit(mittTypes.LIVEKIT.MESSAGE_ACTION_RECIVE,name)
  emitter.emit(mittTypes.WEBHUMAN.CHANGE_COSTUME,url)
}
// 测试流程节点
function setFlowNode(flowNode:any){
  // emitter.emit(mittTypes.LIVEKIT.MESSAGE_ACTION_RECIVE,'F-91L_双手放小腹_右手指向右侧_长距离')
  // emitter.emit(mittTypes.LIVEKIT.MESSAGE_ACTION_RECIVE,name)
  console.log("设置流程节点",flowNode)
  sceneStore.currentFlowNode = flowNode
  currentText.value = flowNode.speechWordsList[0].timelineData.speechData[0].text
  
  currentFlowNode.value = flowNode;
  emitter.emit(mittTypes.TIMELINE.UPDATE_TIMELINE_DATA)
  flowImageList.value = flowNode.imageList;
  flowVideoList.value = flowNode.videoList;
  flowSvgAnimList.value = flowNode.svgAnimList;
  isplaying.value = true;
  setTimeout(function(){
    timelineRef.value.play();
  },50)
  
}
const livkitFlowNodes = ref([])
const curLivekitFlowNodeIndex = ref(0)
const livekitFlowNodePlaying = ref(false)
const stopLivekitFlowNodeList = ref(false)
function addLivekitFlowNode(flowNode:any){
  // if(stopLivekitFlowNodeList.value){
  //   return;
  // }
  livkitFlowNodes.value.push(flowNode)
  if(!livekitFlowNodePlaying.value){
    playLivekitFlowNodeList()
    
  }
  console.log("Livekit节点列表",livkitFlowNodes.value)
}
function clearLivekitFlowNode(){
  flowImageList.value = [];
  flowVideoList.value = [];
  flowSvgAnimList.value = [];
  if(livkitFlowNodes.value.length>0){
    livekitFlowNodePlaying.value = false;
    livkitFlowNodes.value = []
    timelineRef.value.pause();
    curLivekitFlowNodeIndex.value = 0
    
    timelineRef.value.onEnded = null;
  }
  
}
function playLivekitFlowNodeList(){
  startFlowNodeList()
  setFlowNode(livkitFlowNodes.value[curLivekitFlowNodeIndex.value])
  console.log("开始播放Livekit节点",curLivekitFlowNodeIndex.value)
  if(livkitFlowNodes.value[curLivekitFlowNodeIndex.value].type&&livkitFlowNodes.value[curLivekitFlowNodeIndex.value].type == 'static'){
    timelineRef.value.onEnded = function() {
      flowImageList.value = [];
      flowVideoList.value = [];
      flowSvgAnimList.value = [];
      curLivekitFlowNodeIndex.value+=1
      if(livkitFlowNodes.value.length>0&&(curLivekitFlowNodeIndex.value<livkitFlowNodes.value.length)){
        console.log("播放下一个Livekit节点",curLivekitFlowNodeIndex.value)
        setFlowNode(livkitFlowNodes.value[curLivekitFlowNodeIndex.value])
      }else{
        //结束所有Livekit节点
        finishFlowNodeList()
        
      }
    }
   
  }else if(livkitFlowNodes.value[curLivekitFlowNodeIndex.value].type&&livkitFlowNodes.value[curLivekitFlowNodeIndex.value].type == 'dynamic'){
    timelineRef.value.onSpeechEnded = function() {
      flowImageList.value = [];
      flowVideoList.value = [];
      flowSvgAnimList.value = [];
      curLivekitFlowNodeIndex.value+=1
      if(livkitFlowNodes.value.length>0&&(curLivekitFlowNodeIndex.value<livkitFlowNodes.value.length)){
        console.log("播放下一个Livekit节点",curLivekitFlowNodeIndex.value)
        setFlowNode(livkitFlowNodes.value[curLivekitFlowNodeIndex.value])
      }else{
        //结束所有Livekit节点
        finishFlowNodeList()
      }
    }
    timelineRef.value.onEnded = function() {
      if((curLivekitFlowNodeIndex.value>=livkitFlowNodes.value.length)&&chatboxRef.value.recording){
        //恢复麦克风
        emitter.emit(mittTypes.LIVEKIT.AUDIO_ENABLE, true)
      }
    }
  }else{
    timelineRef.value.onEnded = function() {
      flowImageList.value = [];
      flowVideoList.value = [];
      flowSvgAnimList.value = [];
      curLivekitFlowNodeIndex.value+=1
      if(livkitFlowNodes.value.length>0&&(curLivekitFlowNodeIndex.value<livkitFlowNodes.value.length)){
        console.log("播放下一个Livekit节点",curLivekitFlowNodeIndex.value)
        setFlowNode(livkitFlowNodes.value[curLivekitFlowNodeIndex.value])
      }else{
        //结束所有Livekit节点
        finishFlowNodeList()
      }
    }

  }
}
let noReplytimeout =setTimeout(() => {
    
  }, 30000);
let noUserReplyTip = false
function finishFlowNodeList(){
  livekitFlowNodePlaying.value = false;
  console.log("结束所有Livekit节点")
  emitter.emit(mittTypes.RENDERER.FLOWNODE_LIST_END)
  clearLivekitFlowNode();
  if(chatboxRef.value.recording){
    //恢复麦克风
    // emitter.emit(mittTypes.LIVEKIT.AUDIO_ENABLE, true)
  }

  //数字人播完节点后 用户未回复提示
  if(noUserReplyTip){
    // if(sleepTime.value>=40000){
    //   noReplytimeout =  setTimeout(() => {
    //     console.log("30秒提示用户未回复")
    //     emitter.emit(mittTypes.CHATBOX.ADD_MESSAGE,sceneStore.projectConfig.roleConfig.roleSpeech.noReplySpeech.text)
    //     addLivekitFlowNode(sceneStore.projectConfig.roleConfig.roleSpeech.noReplySpeech.flowNode)
    //     noUserReplyTip = false;
    //   }, 30000);

    // }else{
      
    // }
    if(sleepTime.value>=20000){
      noReplytimeout =  setTimeout(() => {
        console.log("休眠前10秒提示用户未回复")
        emitter.emit(mittTypes.CHATBOX.ADD_MESSAGE,sceneStore.projectConfig.roleConfig.roleSpeech.noReplySpeech.text)
        addLivekitFlowNode(sceneStore.projectConfig.roleConfig.roleSpeech.noReplySpeech.flowNode)
        noUserReplyTip = false;
      }, sleepTime.value-10000);
    }
    
  }
  
}
function startFlowNodeList(){
  //开始播放后禁止麦克风
  // emitter.emit(mittTypes.LIVEKIT.AUDIO_ENABLE, false)
  livekitFlowNodePlaying.value = true;
}
function playSleepFlowNodeList(flowNodeList:any){
  setFlowNode(flowNodeList[0])
  console.log("开始播放节点",currentSleepFlowNodeIndex.value)
  timelineRef.value.onEnded = function() {
    setTimeout(() => {
      if(sceneStore.isSleeping){
        currentSleepFlowNodeIndex.value+=1
   
        if(currentSleepFlowNodeIndex.value<flowNodeList.length){
          console.log("播放下一个节点")
          setFlowNode(flowNodeList[currentSleepFlowNodeIndex.value])
        }else{
          console.log("播放初始节点")
          currentSleepFlowNodeIndex.value=0
          setFlowNode(flowNodeList[0])
        }
      }
      
    }, 3000);
    
  }
}
function gotoSleep(asr){
  console.log("开始进入睡眠模式")
  //清除等待词语音
  emitter.emit(mittTypes.CHATBOX.CLEAR_WAITING_TIMEOUT);
  sceneStore.isSleeping = true;
  currentSleepState.value = true;
  clearLivekitFlowNode();
  switch(sceneStore.projectConfig.sleepConfig.sleepType){
    case 'flow':
      const commonElements = sceneStore.projectConfig.flowNodeConfig.filter(item1 => 
        sceneStore.projectConfig.sleepConfig.sleepParams.flowList.some(item2 => item1.id === item2.id)
      );
      if(commonElements){
        console.log("#sleep node:",commonElements)
        playSleepFlowNodeList(commonElements)
      }
      
      break;
    case 'image':
      break;
    case 'video':
      setTimeout(() => {
        videoSleepRef.value.play();
        videoSleepRef.value.onended = function() {
          currentSleepVideoIndex.value+=1;
          if(currentSleepVideoIndex.value<sceneStore.projectConfig.sleepConfig.sleepParams.videoList.length){
            
            videoSleepRef.value.src = origin+sceneStore.projectConfig.sleepConfig.sleepParams.videoList[currentSleepVideoIndex.value].url
          }else{
            currentSleepVideoIndex.value=0;
            videoSleepRef.value.src = origin+sceneStore.projectConfig.sleepConfig.sleepParams.videoList[currentSleepVideoIndex.value].url
          }
          videoSleepRef.value.play();
        }
      }, 100);
      
      break;
  }
  emitter.emit(mittTypes.LIVEKIT.AUDIO_ENABLE_AGENT,false)
  emitter.emit(mittTypes.SLEEPING_CONTROL.ON_SLEEP_START)
  //agent端处理 无需前端返回了
  if(!asr){
    emitter.emit(mittTypes.LIVEKIT.SLEEP_AGENT)
  }
  if(chatboxRef.value&&!chatboxRef.value.recording){
    //恢复麦克风 否则无法语音唤醒
    chatboxRef.value.recording = true;
    emitter.emit(mittTypes.LIVEKIT.AUDIO_ENABLE, true)
  }
}
function wakeUp(asr){
  
  // 唤醒取消暂停状态
  stopLivekitFlowNodeList.value = false;
  if(timelineRef.value){
      timelineRef.value.pause(true);
  
      timelineRef.value.onEnded = null;
    }
  
  currentSleepState.value = false;
  currentSleepFlowNodeIndex.value = 0
  if(sceneStore.projectConfig.sleepConfig.sleepType == 'video'){
    if(videoSleepRef.value){
      videoSleepRef.value.pause();
    }
  }
  //agent端处理 无需前端返回了
  if(!asr){
    
    chatboxRef.value.addLoadingReplyItem();
    emitter.emit(mittTypes.LIVEKIT.WAKEUP_AGENT,true)
  }
  
}
function setAnimationRef(el){
  if(el){
    sceneStore.animationRefList.push(el)
  }
  
}
function setSvgAnimRef(el){
  if(el){
    sceneStore.svgAnimRefList.push(el)
  }
  
}
onMounted(async () => {
  let projectId = getUrlParam('id')+"_"+new Date().getTime();
  // close2d({
  //   resource_code:'res_3b87f31220250217132251',
  //     })
  //     return;
  // beforeunload 的回调，弹出提示，确认是否刷新或关闭浏览器
  let bfcallback = async (e)=>{
    var dialogText = '确定要离开吗';
    e.returnValue = dialogText;
    
    if (sceneStore.livekitRoom) {
      // emitter.emit(mittTypes.LIVEKIT.SLEEP_AGENT)
      sceneStore.livekitRoom.disconnect();
      closeRoom({
        roomName: sceneStore.livekitRoom.name
      })
    }
    
    // 在 beforeunload 中执行关闭操作
    if(sceneStore.projectConfig.projectSet.type == '2d'){
    try {
      // 使用 sendBeacon 发送请求，这个 API 专门用于页面卸载时发送数据
      // navigator.sendBeacon('/api/close2d', JSON.stringify({
      //   projectId: projectId
      // }));
      close2d({
        projectId: projectId
      })
      
      // if (sceneStore.livekitRoom) {
      //   sceneStore.livekitRoom.disconnect();
      // }

      // closeRoom({
      //   roomName: sceneStore.livekitRoom.name
      // })
    } catch(err) {
      console.error('Close 2d failed:', err);
    }
    }
  
    if(sceneStore.projectConfig.projectSet.type == 'UE3d'){
    try {
      // navigator.sendBeacon('/api/closeUe', JSON.stringify({
      //   // serverId: ueHumanServerId.value,
      //   // ueId: ueHumanStreamerId.value
      //   projectId:projectId
      // }));
      closeUe({
        projectId:projectId
      })
      
      // if (sceneStore.livekitRoom) {
      //   sceneStore.livekitRoom.disconnect();
      // }
      // closeRoom({
      //   roomName: sceneStore.livekitRoom.name
      // })
    } catch(err) {
      console.error('Close UE failed:', err);
    }
    }
    
    
    return dialogText;
  }

  // 移除 unload 事件监听,只使用 beforeunload
  window.addEventListener('beforeunload', bfcallback);
  // let project = await getProjectAllConfigInfo({id:"1803245434144567297"})
  
  let project = await getProjectAllConfigInfo({id:projectId})
  let projectConfig = project.data
  sceneStore.projectConfig = projectConfig
  console.log("project:",projectConfig)
  let projectDetail = await getAimetaProjectManagerdetailInfo({id:projectId})
  document.title = projectDetail.data.projectName
  console.log("projectDetail:",projectDetail.data)
  let animataDetail = await getAimetaManagerdetailInfo({id:projectDetail.data.aimetaId})
  console.log("animataDetail:",animataDetail)

  sceneStore.timelineRef = timelineRef

  if(projectConfig.projectSet.type){
    currentProjectType.value = projectConfig.projectSet.type
  }
  if(projectConfig.projectSet.platform){
    currentProjectPlatform.value = projectConfig.projectSet.platform
  }
  if(projectConfig.uiConfig.historySet){
    currentInputType.value = projectConfig.uiConfig.historySet.type
  }

  switch(projectConfig.projectSet.platform){
      case 'pc':
        resolutionPolicy.value.width = 1920
          resolutionPolicy.value.height = 1080
          if(window.innerWidth/window.innerHeight>16/9){
            resolutionPolicy.value.policy = 'FIXED_HEIGHT'
          }
        break;
      case 'mobile':
        resolutionPolicy.value.width = 1080
          resolutionPolicy.value.height = 1920
          if(window.innerWidth/window.innerHeight>9/16){
            resolutionPolicy.value.policy = 'FIXED_HEIGHT'
          }
        break;
      case 'screen':
        resolutionPolicy.value.width = 1080
        resolutionPolicy.value.height = 1920
        if(window.innerWidth/window.innerHeight>9/16){
            resolutionPolicy.value.policy = 'FIXED_HEIGHT'
          }
        break;
    }

  if(projectConfig.uiConfig.chatbox){
    chatboxParams.value.box = projectConfig.uiConfig.chatbox.box
    chatboxParams.value.input = projectConfig.uiConfig.chatbox.input
    chatboxParams.value.questions = projectConfig.uiConfig.chatbox.questions
  }
  fullBody.value = projectConfig.uiConfig.modelSet.fullBody
  if(projectConfig.projectSet.type == 'Web3d'){
    emitter.emit(mittTypes.LOADING.SET_LOADING_STYLE,'progress')
    webHumanParams.value.x = projectConfig.uiConfig.modelSet.x
    webHumanParams.value.y = projectConfig.uiConfig.modelSet.y
    webHumanParams.value.width = projectConfig.uiConfig.modelSet.width
    webHumanParams.value.height = projectConfig.uiConfig.modelSet.height

    webHumanUrl.value = origin+projectConfig.uiConfig.modelSet.modelAppearance
    if(animataDetail.data.costumesList){
      animataDetail.data.costumesList.forEach(element => {
        webHumanCostumeList.value.push(origin+element.costumesFile)
      });
    }
  
    if(animataDetail.data.actionPackageInfo.actionList){
      animataDetail.data.actionPackageInfo.actionList.forEach(element => {
        webHumanActionList.value.push({url:origin+element.animateFile,name:element.actionName})
        webHumanActions.value.push(element.actionName)
      });
    }
    

    
  }else if(projectConfig.projectSet.type == 'UE3d'){
    emitter.emit(mittTypes.LOADING.SET_LOADING_STYLE,'spin')
    ueHumanParams.value.x = projectConfig.uiConfig.modelSet.x
    ueHumanParams.value.y = projectConfig.uiConfig.modelSet.y
    ueHumanParams.value.width = projectConfig.uiConfig.modelSet.width
    ueHumanParams.value.height = projectConfig.uiConfig.modelSet.height
    // await closeUe({
    //   serverId:'1869656051219869801',
    //   ueId:'AiHumanStream1'
    // })
    // await closeUe({
    //   serverId:'1869656051219869801',
    //   ueId:'AiHumanStream2'
    // })
    // await closeUe({
    //   serverId:'1869656051219869801',
    //   ueId:'AiHumanStream3'
    // })
    emitter.on(mittTypes.LIVEKIT.CONNECT_SUCCESS,async function(data:any){
      setTimeout(async () => {
        let ueInfo = await getCanOpenAndOpenUe({
          projectId:projectId
        })
        if(!ueInfo.data){
          ElMessage.error("没有可用的UE服务器")
        }else{
          ueHumanServerId.value = ueInfo.data.serverId
          ueHumanUrl.value = ueInfo.data.streamUrl
          ueHumanStreamerId.value = ueInfo.data.ueId
        }
      }, 1000);
      
    })
    
    
  }else if(projectConfig.projectSet.type == '2d'){
    emitter.emit(mittTypes.LOADING.SET_LOADING_STYLE,'spin')
    Human2dParams.value.x = projectConfig.uiConfig.modelSet.x
    Human2dParams.value.y = projectConfig.uiConfig.modelSet.y
    Human2dParams.value.width = projectConfig.uiConfig.modelSet.width
    Human2dParams.value.height = projectConfig.uiConfig.modelSet.height
    // await closeUe({
    //   serverId:'1869656051219869801',
    //   ueId:'AiHumanStream1'
    // })
    // await closeUe({
    //   serverId:'1869656051219869801',
    //   ueId:'AiHumanStream2'
    // })
    // await closeUe({
    //   serverId:'1869656051219869801',
    //   ueId:'AiHumanStream3'
    // })
    emitter.on(mittTypes.LIVEKIT.CONNECT_SUCCESS,async function(data:any){
      async function open2d(){
        let human2dInfo = await getCanOpenAndOpen2d({
          projectId:projectId
        })
        
        function handleResult(){
          let interval = setInterval(async () => {
            let openResult = await get2dResourceApplyResult({
              projectId:projectId
            })
            if(openResult.code == 200){
              switch(openResult.data.status){
                case 4:
                  // emitter.emit(mittTypes.LOADING.LOAD_FINISH)
                  
                  //emitter.emit(mittTypes.LOADING.UPDATE_LOADING_WORD,'数字人等待播放中...')
                  clearInterval(interval);
                  Human2dUrl.value = openResult.data.stream_id
                  Human2dConfig.value.urls = openResult.data.urls
                  Human2dConfig.value.username = openResult.data.username
                  Human2dConfig.value.credential = openResult.data.credential
                  resource2dCode.value = openResult.data.resource_code
                  // webhuman2dRenderRef.value.rtcVideo.play();
                  //已启动
                  break;
                case 0:
                  emitter.emit(mittTypes.LOADING.UPDATE_LOADING_WORD,'数字人等待启动中...')
                  //等待启动
                  resource2dCode.value = openResult.data.resource_code
                  break;
                case 2:
                  emitter.emit(mittTypes.LOADING.UPDATE_LOADING_WORD,'数字人正在启动...')
                  //启动中
                  resource2dCode.value = openResult.data.resource_code
                  break;
                case -1:
                  //启动失败 cpu不足
                  clearInterval(interval);
                  break;
                case -2:
                  //启动失败 gpu不足
                  clearInterval(interval);
                  break;
                case -3:
                  //启动失败 不明原因
                  clearInterval(interval);
                  break;
                case 6:
                  //进程已经申请关闭
                  clearInterval(interval);
                  break;
              }

            }
            console.log(openResult)
          }, 1000);
        }
        if(!human2dInfo.data){
          // ElMessage.error({message:"没有可用的数字人,请耐心等待或稍后再试",grouping: true,})
          emitter.emit(mittTypes.LOADING.UPDATE_LOADING_WORD,'没有可用的数字人,请耐心等待或稍后再试,正在重连...')
          setTimeout(() => {
            open2d();
          }, 5000);
          
        }else{
          console.log('2dInfo',human2dInfo)
          handleResult()
          
          // ueHumanServerId.value = ueInfo.data.serverId
          // ueHumanUrl.value = ueInfo.data.streamUrl
          // ueHumanStreamerId.value = ueInfo.data.ueId
        }
      }
      setTimeout(async () => {
        open2d()
      }, 1000);
      
    })
  }
  

  flowNodes.value = projectConfig.flowNodeConfig
  if(flowNodes.value.length>0){
    // currentFlowNode.value = flowNodes.value[0];
    
    // flowImageList.value = flowNodes.value[0].imageList;
    // flowVideoList.value = flowNodes.value[0].videoList;
    // flowSvgAnimList.value = flowNodes.value[0].svgAnimList;

    // sceneStore.currentFlowNode = flowNodes.value[0]

    // setTimeout(() => {
    //   sceneStore.animationRefList.forEach(function(animref){
    //     // animref.setShowAnimation(false)
      
    //   })
    //   timelineRef.value.play()
    // }, 500);
   
  }
  

  imageList.value = projectConfig.uiConfig.imageList
  videoList.value = projectConfig.uiConfig.videoList
  iframeList.value = projectConfig.uiConfig.webList
  textList.value = projectConfig.uiConfig.textList
  if(projectConfig.uiConfig.htmlTextList){
    htmlTextList.value = projectConfig.uiConfig.htmlTextList
  }
 
  sleepTime.value = parseFloat(projectConfig.sleepConfig.sleepTime)*1000
  if(sceneStore.projectConfig.uiConfig.captions){
    captionsParams.value.enable = sceneStore.projectConfig.uiConfig.captions.enable
    captionsParams.value.x = sceneStore.projectConfig.uiConfig.captions.x
    captionsParams.value.y = sceneStore.projectConfig.uiConfig.captions.y
    captionsParams.value.width = sceneStore.projectConfig.uiConfig.captions.width
    captionsParams.value.height = sceneStore.projectConfig.uiConfig.captions.height
    captionsParams.value.style.fontSize = sceneStore.projectConfig.uiConfig.captions.fontSize+'px'
    captionsParams.value.style.backgroundColor = sceneStore.projectConfig.uiConfig.captions.backgroundColor
    captionsParams.value.style.border =  "2px solid "+sceneStore.projectConfig.uiConfig.captions.borderColor
    captionsParams.value.style.color = sceneStore.projectConfig.uiConfig.captions.color
    captionsParams.value.style.lineHeight = sceneStore.projectConfig.uiConfig.captions.lineHeight
  }
  // voiceInput 初始化部分
  if(sceneStore.projectConfig.uiConfig.voiceInput){
    voiceInputParams.value.enable = sceneStore.projectConfig.uiConfig.voiceInput.enable
    voiceInputParams.value.x = sceneStore.projectConfig.uiConfig.voiceInput.x
    voiceInputParams.value.y = sceneStore.projectConfig.uiConfig.voiceInput.y
    voiceInputParams.value.width = sceneStore.projectConfig.uiConfig.voiceInput.width
    voiceInputParams.value.height = sceneStore.projectConfig.uiConfig.voiceInput.height
    voiceInputParams.value.zindex = sceneStore.projectConfig.uiConfig.voiceInput.zindex
    voiceInputParams.value.opacity = sceneStore.projectConfig.uiConfig.voiceInput.opacity
    voiceInputParams.value.url = sceneStore.projectConfig.uiConfig.voiceInput.url
  }
  // 在 onMounted 中添加 interruptParams 的初始化代码
  if(sceneStore.projectConfig.uiConfig.interrupt){
    interruptParams.value.buttonInterrupt = sceneStore.projectConfig.uiConfig.interrupt.buttonInterrupt
    interruptParams.value.tip = sceneStore.projectConfig.uiConfig.interrupt.tip

    if(sceneStore.projectConfig.uiConfig.interrupt.buttonOptions){
      interruptParams.value.buttonOptions = sceneStore.projectConfig.uiConfig.interrupt.buttonOptions
    }

    if(sceneStore.projectConfig.uiConfig.interrupt.tipOptions){
      interruptParams.value.tipOptions = sceneStore.projectConfig.uiConfig.interrupt.tipOptions
    }

    if(sceneStore.projectConfig.uiConfig.interrupt.voiceInterruptWords){
      interruptParams.value.voiceInterruptWords = sceneStore.projectConfig.uiConfig.interrupt.voiceInterruptWords
    }

    if(sceneStore.projectConfig.uiConfig.interrupt.interruptResponses){
      interruptParams.value.interruptResponses = sceneStore.projectConfig.uiConfig.interrupt.interruptResponses
    }
  }
  if(sceneStore.projectConfig.uiConfig.style&&sceneStore.projectConfig.uiConfig.style!='default'){
    if(sceneStore.projectConfig.uiConfig.style.type == 'custom'){
      if(sceneStore.projectConfig.uiConfig.style.param.html&&sceneStore.projectConfig.uiConfig.style.param.html!=''){
        $('#externalUI').load(origin+sceneStore.projectConfig.uiConfig.style.param.html, function () {
          if(sceneStore.projectConfig.uiConfig.style.param.css&&sceneStore.projectConfig.uiConfig.style.param.css!=''){
            addCss(sceneStore.projectConfig.uiConfig.style.param.cs)
          }
          if(sceneStore.projectConfig.uiConfig.style.param.js&&sceneStore.projectConfig.uiConfig.style.param.js!=''){
            Promise.all([
              asynLoad(origin+sceneStore.projectConfig.uiConfig.style.param.js, false),
            ]).then(() => {
              setTimeout(() => {
                console.log("加载完毕后执行的操作");
              }, 200)
            }).catch(res => {
		          ElMessage.error("加载异常")
            })
          }

        });
      }
    }else if(sceneStore.projectConfig.uiConfig.style.type == "scientific"){
      
      bgImage.value = 'https://aiimg.huilan.com/aiHuman/UIstyles/scientific/images/back.jpg'
      chatboxParams.value.input.backgroundColor = '#0017B0'
      chatboxParams.value.questions.backgroundColor = '#0017B000'
      let url = new URL(`../../styles/scientific/style.css`, import.meta.url).href
      addCss(url)
    }
  }

  bgImage.value = projectConfig.uiConfig.backgroundSet.url.indexOf('http')<0?origin+projectConfig.uiConfig.backgroundSet.url:projectConfig.uiConfig.backgroundSet.url

  // webHumanUrl.value = "https://aiimg.huilan.com/"+project.data.uiConfig.modelSet.modelAppearance
  
  
  // if(projectId == '1805122630329040898'){
  //   webHumanUrl.value = "https://aiimg.huilan.com/material/model/bucket-000000/1845686477328011266.glb"
  // }else if(projectId == '1803245434144567297'){
  //   webHumanUrl.value = "https://aiimg.huilan.com/material/model/bucket-000000/1845663967643488257.glb"
  // }
  
  // webHumanActionList.value = "https://aiimg.huilan.com/material/model/bucket-000000/1845031651313242114.glb"
  let serverInfo = await getTokenToBegin({
    configJson:project.data,
    clientType:1
  })
  // let serverInfo2 = await getTokenToBegin({
  //   configJson:project.data,
  //   clientType:2
  // })
  // console.log('serverInfo2',serverInfo2)

  // ue或2d数字人提前链接进房间 并静音 等待开始后取消静音 发送唤醒消息
  if(projectConfig.projectSet.type == 'UE3d'||projectConfig.projectSet.type == '2d'){
    livkitToken.value = serverInfo.data.wsServer.token
    livkitUrl.value = serverInfo.data.wsServer.url
  }else{

  }
  
    
  let timeout =setTimeout(() => {
    
  }, sleepTime.value);
  emitter.on(mittTypes.LOADING.START_SCENE,function(data:any){
    if(projectConfig.projectSet.type == 'UE3d'){
    }else{
      livkitToken.value = serverInfo.data.wsServer.token
      livkitUrl.value = serverInfo.data.wsServer.url
    }
  
    clearTimeout(timeout)
    timeout= setTimeout(() => {
    
      console.log("初始"+sleepTime.value+"秒开始进入睡眠模式")
      gotoSleep(false);
    }, sleepTime.value);
  })

  emitter.on(mittTypes.LIVEKIT.MESSAGE_CHAT_RECIVE,function(data:any){
    let messageData = data.messageData;
    let from = data.from;
    if(messageData.message.indexOf('<|STT|>')>=0){
      return
    }
    if(from == mittTypes.LIVEKIT.MESSAGE_CHAT_FROM_TYPE.BOT){
      // currentText.value = messageData.message
      stopLivekitFlowNodeList.value = false;
      //等待用户没有说话 提示
      noUserReplyTip = true;
    }
    if(from == mittTypes.LIVEKIT.MESSAGE_CHAT_FROM_TYPE.LOCAL){
      //用户asr说话 取消暂停状态
      stopLivekitFlowNodeList.value = false;
      //用户说话 取消提示
      noUserReplyTip = false;
    }
  })
  emitter.on(mittTypes.LIVEKIT.MESSAGE_CHAT_UPDATE,function(data:any){
    let messageData = data.messageData;
    let from = data.from;
    if(messageData.message.indexOf('<|STT|>')>=0){
      return
    }
    if(from == mittTypes.LIVEKIT.MESSAGE_CHAT_FROM_TYPE.BOT){
      const text = currentText.value
      
      // currentText.value = messageData.message.replace(text,'')
    }
    if(from == mittTypes.LIVEKIT.MESSAGE_CHAT_FROM_TYPE.LOCAL){
      //用户asr说话 取消暂停状态
      stopLivekitFlowNodeList.value = false;
    }
    
  })
  emitter.on(mittTypes.LIVEKIT.MESSAGE_SEND,async function(data:any){
    //用户发送消息 取消暂停状态
    stopLivekitFlowNodeList.value = false;
  })
  emitter.on(mittTypes.WEBHUMAN.STOP_VISEME_AUDIO,async function(data:any){
    // 开启暂停状态 停止流程节点列表播放
    stopLivekitFlowNodeList.value = true;
    clearLivekitFlowNode()
    timelineRef.value.pause();
    
    console.log('收到停止回答按钮消息，停止回答表情和语音')
  })
  emitter.on(mittTypes.RENDERER.SET_FLOWNODE,function(data:any){
    setFlowNode(data)
    
  })
  emitter.on(mittTypes.RENDERER.ADD_FLOWNODE,function(data:any){
    addLivekitFlowNode(data)
    
  })
  emitter.on(mittTypes.RENDERER.CLEAR_FLOWNODE,function(data:any){
    clearLivekitFlowNode()
    
  })
  emitter.on(mittTypes.RENDERER.SET_UE_FLOWNODE_LIST_END,function(data:any){
    finishFlowNodeList()
    
  })
  emitter.on(mittTypes.RENDERER.SET_UE_FLOWNODE_LIST_START,function(data:any){
    startFlowNodeList()
    
  })
  currentSleepType.value = sceneStore.projectConfig.sleepConfig.sleepType
  
  emitter.on(mittTypes.CHATBOX.UPDATE_USER_ACTIVE,function(stopReply:any){
    //用户说话 取消未回复提示
    clearTimeout(noReplytimeout)
    //如果是打断则重新计算提示用户未回复时间 其他的为播放结束后更新
    if(stopReply){
      noReplytimeout =  setTimeout(() => {
        console.log("休眠前10秒提示用户未回复")
        emitter.emit(mittTypes.CHATBOX.ADD_MESSAGE,sceneStore.projectConfig.roleConfig.roleSpeech.noReplySpeech.text)
        addLivekitFlowNode(sceneStore.projectConfig.roleConfig.roleSpeech.noReplySpeech.flowNode)
        noUserReplyTip = false;
      }, sleepTime.value-10000);
    }
  })
  emitter.on(mittTypes.CHATBOX.STOP_REPLY,function(data:any){
    if(!sceneStore.isSleeping){
      //非休眠状态下 打断 更新提示用户未回复时间
      noUserReplyTip = true;
    }
  })
  emitter.on(mittTypes.SLEEPING_CONTROL.UPDATE_WAKEUP_STATUS,function(data:any){
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      gotoSleep(false);
      console.log("刷新后"+sleepTime.value+"秒开始进入睡眠模式")
    }, sleepTime.value);
  })
  emitter.on(mittTypes.SLEEPING_CONTROL.SLEEP,function(asr:any){
    clearTimeout(timeout)
    console.log("命令进入睡眠模式")
    gotoSleep(asr);
  })
  emitter.on(mittTypes.SLEEPING_CONTROL.WAKEUP,function(asr:any){
    clearTimeout(timeout)
    wakeUp(asr);
    console.log("命令唤醒")
    timeout = setTimeout(() => {
      console.log("唤醒后"+sleepTime.value+"秒开始进入睡眠模式")
      gotoSleep(asr);
    }, sleepTime.value);
  })
  
    
    //移除监听
    // this.$once('hook:beforeDestroy', () => { 
    //   window.removeEventListener('beforeunload', bfcallback);
    //   window.removeEventListener('unload', ulcallback);
    // });
})
</script>
<script lang="ts">
export default {
  name: 'renderContainer'
}
</script>
<style scoped>
.center{
  background-position: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background-size: cover;
}
</style>